<template>
  <van-icon name="arrow-left" class="tohome" size="20" @click="toHome" />
  <div class="reset" v-if="isShow">
    <div class="reset__title">重置密码</div>
    <div class="reset__input">
      <van-field v-model="password" placeholder="请输入密码" />
    </div>
    <div class="reset__btn">
      <van-button class="reset__btn__btn" type="primary" block @click="reset"
        >确定</van-button
      >
    </div>
  </div>
  <van-empty image="error" description="链接失效或错误" v-else />
</template>

<script>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const isShow = ref(false);
    const password = ref("");
    const email = ref("");
    const token = ref("");
    const toHome = () => {
      router.push({ name: "home" });
    };
    const reset = () => {
      if (password.value) {
        if (email.value && token.value) {
          store
            .dispatch("user/resetPassword", {
              email: email.value,
              token: token.value,
              password: password.value,
            })
            .then((res) => {
              if (res) {
                toHome();
              } else {
                setTimeout(() => {
                  Toast.loading({
                    message: "加载中...",
                    forbidClick: true,
                  });
                }, 1000);
                setTimeout(() => {
                  password.value = "";
                  Toast.clear();
                }, 1100);
              }
            });
        }
      } else {
        Toast("密码不能为空");
      }
    };
    onMounted(() => {
      email.value = route.query.email;
      token.value = route.query.token;
      if (email.value && token.value) {
        isShow.value = true;
      }
    });
    return { isShow, password, toHome, reset };
  },
};
</script>

<style lang="less" scoped>
.tohome {
  padding: 20px 15px;
}
.reset {
  padding: calc(20vh - 60px) 50px;
  &__title {
    font-weight: bold;
    font-size: 23px;
    letter-spacing: 5px;
    margin-bottom: 10px;
  }
  &__input {
    padding: 15px 0;
    margin: 0 -15px;
  }
  &__btn {
    &__btn {
      border-radius: 10px;
      height: 35px;
      letter-spacing: 10px;
      font-size: 15px;
    }
  }
}
</style>